<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>我的订单</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="./css/index.css" />
		<style type="text/css">
			#app {
				height: 100%;
			}
			.address {
				width: 6.9rem;
				/* height: 2rem; */
				margin: 0 auto;
				margin-bottom: 0.32rem;
				background: #ffffff;
				box-shadow: 0rem 0.06rem 0.26rem 0.02rem rgba(0, 0, 0, 0.1);
				border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
				opacity: 1;
				overflow: hidden;
				margin-top: 0.32rem;
			}
			.address_card {
				height: 1.1rem;
				padding: 0.28rem 0.32rem;
				display: flex;
				align-items: center;
				position: relative;
			}
			.good_contain {
				width: 6.26rem;
				background: #ffffff;
				padding: 0.32rem;
				margin: 0 auto;
				margin-top: 0.32rem;
				box-shadow: 0rem 0.06rem 0.26rem 0.02rem rgba(0, 0, 0, 0.1);
				border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
				opacity: 1;
			}
			.good_card {
				display: flex;
				position: relative;
				margin-bottom: 0.24rem;
			}
			.good_date {
				height: 0.72rem;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
			}
			.good_date img {
				width: 0.32rem;
				height: 0.32rem;
			}
			.good_card:last-child {
				margin-bottom: 0;
			}
			.good_img {
				width: 1.92rem;
				height: 1.92rem;
				border-radius: 0.16rem;
				margin-right: 0.18rem;
			}
			.serve_time {
				width: 1.04rem;
				height: 0.48rem;
				line-height: 0.48rem;
				color: #01cd9c;
				text-align: center;
				font-size: 0.28rem;
				border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
				opacity: 1;
				border: 0.02rem solid #01cd9c;
				margin-top: 0.8rem;
			}
			.good {
				display: flex;
				align-items: center;
				margin-top: 0.8rem;
				justify-content: space-between;
			}
			.good_price {
				/* position: absolute;
				right: 0.32rem;
				bottom: 0.32rem; */
				font-size: 0.48rem;
				color: #e22e30;
			}
			.good_bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 0.24rem;
			}
			.qrcode {
				width: 1.44rem;
				height: 0.64rem;
				line-height: 0.64rem;
				text-align: center;
				color: #01cd9c;
				font-size: 0.28rem;
				background: #ffffff;
				border-radius: 0.32rem 0.32rem 0.32rem 0.32rem;
				opacity: 1;
				border: 0.02rem solid #01cd9c;
			}
			.van-popup {
				height: 7.44rem;
				border-radius: 0.4rem 0.4rem 0 0;
			}
			.head {
				height: 0.96rem;
				line-height: 0.96rem;
				text-align: center;
				font-size: 0.32rem;
			}
			.body {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.body img {
				width: 2.8rem;
				height: 2.8rem;
				margin-bottom: 0.24rem;
			}
			.btn {
				position: absolute;
				bottom: 0.26rem;
				left: 0.32rem;
				width: 6.86rem;
				height: 0.8rem;
				background: #01cd9c;
				color: #ffffff;
				border-radius: 20.4rem 20.4rem 20.4rem 20.4rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<div
					class="good_contain"
					v-for="item in products"
					@click="toDetail(item)"
				>
					<div class="good_date">
						<span style="font-size: 0.32rem; color: #444444"
							>{{item.create_time.slice(0,10)}}</span
						>
						<img src="./img/arrow.png" />
					</div>
					<div class="good_card" v-for="product in item.products">
						<img
							:src="product.product_thumb||'./img/placeholder.png'"
							class="good_img"
						/>
						<div style="display: flex; flex-direction: column; width: 4.16rem">
							<div>
								<p
									style="
										font-size: 0.33rem;
										color: #333333;
										margin-bottom: 0.16rem;
									"
								>
									{{product.product_name}}
								</p>
								<!-- <div class="serve_time" v-else>{{item.service_period}}</div> -->
							</div>
							<div class="good">
								<p class="good_price">
									￥{{product.product_discount_price?product.product_discount_price:product.product_vip_price?product.product_vip_price:product.product_price}}
								</p>
								<span style="font-size: 0.28rem; color: #999999"
									>X{{product.product_num}}</span
								>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<script src="./js/adjust.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script> -->

	<script type="module">
		// var vConsole = new VConsole()
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					detail: {},
					products: [],
					pid: '',
				}
			},
			created() {
				this.pid = url('?patient_id')
				this.checkOrder()
			},
			methods: {
				checkOrder() {
					getAction(spliceUrl('/shop/order/list'), {
						patient_id: this.pid,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.products = res.data
						} else {
							this.$toast.fail({
								message: res.message,
							})
						}
					})
				},
				toDetail(item) {
					console.log(item)
					sessionStorage.setItem('order', JSON.stringify(item.data_id))
					window.location.href =
						'./orderCheck.html?pid=' + this.pid + '&fromOrder=true'
				},
			},
			components: {},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
